<template>
  <view>
    <!-- 底部导航栏 -->
    <view class="bottom-nav">
      <view class="nav-content">
        <view class="nav-icons-group">
          <!-- 循环渲染导航项 -->
          <view class="nav-item" v-for="(item, index) in navItems" :key="index" @click="onNavItemClick(item.path, index)">
            <view class="nav-icon-wrapper">
              <view class="nav-icon" :class="[item.iconClass]"></view>
              <view class="selected-overlay" :class="{ 'show': currentIndex === index }"></view>
            </view>
          </view>
        </view>
      </view>

      <!-- 浮动操作按钮 -->
      <view class="fab-container" @click="toggleFabMenu">
        <view class="fab">
          <text class="fab-icon">+</text>
        </view>
      </view>
    </view>

    <!-- 弹出菜单遮罩层 -->
    <view class="menu-overlay" v-if="fabMenuVisible" @click="toggleFabMenu"></view>

    <!-- 弹出菜单 -->
    <view class="fab-menu" :class="{ 'show': fabMenuVisible }">
      <view class="menu-content">
        <view class="tool-grid">
          <!-- 第一行 -->
          <view class="tool-item" @click="navigateTo('todo')">
            <view class="icon-wrapper">
              <view class="todo-icon-new"></view>
            </view>
            <text class="tool-text">待办清单</text>
          </view>
          
          <view class="tool-item" @click="navigateTo('anniversary')">
            <view class="icon-wrapper">
              <ToolIcon type="anniversary" size="large" />
            </view>
            <text class="tool-text">纪念日</text>
          </view>
          
          <view class="tool-item" @click="navigateTo('memo')">
            <view class="icon-wrapper">
              <ToolIcon type="memo" size="large" />
            </view>
            <text class="tool-text">备忘录</text>
          </view>
          
          <!-- 第二行 -->
          <view class="tool-item" @click="navigateTo('diary')">
            <view class="icon-wrapper">
              <ToolIcon type="diary" size="large" />
            </view>
            <text class="tool-text">日记</text>
          </view>
          
          <view class="tool-item" @click="navigateTo('accounting')">
            <view class="icon-wrapper">
              <ToolIcon type="accounting" size="large" />
            </view>
            <text class="tool-text">记账</text>
          </view>
          
          <view class="tool-item" @click="navigateTo('schedule')">
            <view class="icon-wrapper">
              <ToolIcon type="schedule" size="large" />
            </view>
            <text class="tool-text">课程表</text>
          </view>
        </view>
      </view>
      
      <!-- 关闭按钮 -->
      <view class="close-button" @click="toggleFabMenu">
        <text class="close-icon">×</text>
      </view>
    </view>
  </view>
</template>

<script>
import ToolIcon from '@/components/ToolIcon/ToolIcon.vue';

export default {
  name: 'BottomNavigation',
  components: {
    ToolIcon
  },
  props: {
    navItems: {
      type: Array,
      default: () => [
        { iconClass: "todo-icon", name: "待办", path: "/pages/index/index" },
        { iconClass: "work-icon", name: "工作", path: "/pages/tools/tools" },
        { iconClass: "profile-icon", name: "我的", path: "/pages/personal/personal" }
      ]
    },
    defaultIndex: {
      type: Number,
      default: 0 // 默认值仍为0
    }
  },
  data() {
    return {
      currentIndex: this.defaultIndex, // 根据传入的props初始化currentIndex
      fabMenuVisible: false // 控制FAB菜单的显示和隐藏
    };
  },
  methods: {
    onNavItemClick(path, index) {
      console.log('navItems:', this.navItems);
      // 调用 uni.navigateTo 进行页面跳转
      if (path) {
        uni.navigateTo({
          url: path
        });
      }
      this.currentIndex = index;
    },
    toggleFabMenu() {
      // 切换FAB菜单的显示状态
      this.fabMenuVisible = !this.fabMenuVisible;
    },
    navigateTo(type) {
      // 处理导航到不同工具页面
      const routes = {
        todo: '/pages/Todo/Todo',
        anniversary: '/pages/Anniversary/Anniversary',
        memo: '/pages/Memo/Memo',
        diary: '/pages/Diary/Diary',
        accounting: '/pages/Accounting/Accounting',
        schedule: '/pages/Schedule/Schedule'
      };
      
      // 隐藏菜单
      this.fabMenuVisible = false;
      
      // 跳转到对应页面
      uni.navigateTo({
        url: routes[type]
      });
    }
  }
}
</script>

<style>
/* 底部导航栏 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 180rpx;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 10;
}

.nav-content {
  width: 100%;
  height: 150rpx;
  background-color: #7766E7;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  border-radius: 40rpx 40rpx 0 0;
  box-shadow: 0 -5rpx 15rpx rgba(119, 102, 231, 0.2);
}

/* 添加波浪效果 */
/* .bottom-nav::before {
  content: "";
  position: absolute;
  top: -20rpx;
  left: 0;
  right: 0;
  height: 20rpx;
  background-color: #7766E7;
  使用贝塞尔曲线创建平缓的上升弧度
  clip-path: path('M 0,20 Q 200,0 400,10 Q 600,20 800,0 L 800,20 L 0,20 Z');
} */

.nav-icons-group {
  display: flex;
  width: 60%;
  justify-content: space-around;
  margin-left: 40rpx;
}

.nav-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-icon-wrapper {
  position: relative;
}

.nav-icon {
  width: 60rpx;
  height: 60rpx;
  background-color: #FFFFFF;
  opacity: 0.8;
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  border-radius: 10rpx;
  z-index: 2; /* 提高图标层级，确保在白色方块之上 */
}

.todo-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm-2 14l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm-2 14l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/%3E%3C/svg%3E");
}

/* 新的待办清单图标 */
.todo-icon-new {
  width: 80rpx;
  height: 80rpx;
  position: relative;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='71.830078125' height='82.08984375' viewBox='0 0 71.830078125 82.08984375' fill='none'%3E%3Cpath d='M22.8867 3.94336L48.9409 3.94336L67.5559 67.4209L12.2173 69.79L22.8867 3.94336L22.8867 3.94336Z' fill-rule='evenodd' fill='%23EAEDFF'%3E%3C/path%3E%3Cpath d='M52.33 4.1C51.82 1.54 49.77 0 47.2 0L24.63 0C22.06 0 20.01 1.54 19.5 4.1L18.47 10.26L10.26 10.26C4.62 10.26 0 14.88 0 20.52L0 71.83C0 77.47 4.62 82.09 10.26 82.09L61.57 82.09C67.21 82.09 71.83 77.47 71.83 71.83L71.83 20.52C71.83 14.88 67.21 10.26 61.57 10.26L53.36 10.26L52.33 4.1ZM21.5483 20.5199L50.2783 20.5199L47.1983 5.1299L24.6283 5.1299L21.5483 20.5199ZM53.3543 35.9136C54.3843 34.8836 55.9243 34.8836 56.9443 35.9136C57.9743 36.9436 57.9743 38.4736 56.9443 39.5036L31.8143 64.6436C30.7843 65.6736 29.2443 65.6736 28.2143 64.6436L17.4443 53.8736C16.4143 52.8436 16.4143 51.3036 17.4443 50.2736C18.4743 49.2536 20.0043 49.2536 21.0343 50.2736L29.7543 59.5136L53.3543 35.9136Z' fill-rule='evenodd' fill='%237766E7'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.work-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2h4c1.1 0 2 .9 2 2v2h4c1.1 0 2 .9 2 2v11c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V8c0-1.1.9-2 2-2h4V4c0-1.1.9-2 2-2zm4 4V4h-4v2h4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2h4c1.1 0 2 .9 2 2v2h4c1.1 0 2 .9 2 2v11c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V8c0-1.1.9-2 2-2h4V4c0-1.1.9-2 2-2zm4 4V4h-4v2h4z'/%3E%3C/svg%3E");
}

.profile-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
}

/* 浮动操作按钮 */
.fab-container {
  position: absolute;
  top: -40rpx;
  right: 60rpx;
  width: 120rpx;
  height: 120rpx;
  background-color: #FFFFFF;
  border-radius: 25rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 6rpx 20rpx rgba(119, 102, 231, 0.2);
  z-index: 11;
}

.fab {
  width: 100rpx;
  height: 100rpx;
  background-color: #7766E7;
  border-radius: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fab-icon {
  font-size: 60rpx;
  color: #FFFFFF;
  font-weight: 300;
}

.selected-overlay {
  position: absolute;
  top: -8rpx; /* 适当调整位置，包裹住图标 */
  left: -7rpx;
  width: 70rpx; /* 适当增大尺寸，包裹住图标 */
  height: 70rpx;
  border: 3rpx solid #FFFFFF; /* 使用边框来包裹图标 */
  background-color: transparent; /* 背景设为透明 */
  border-radius: 15rpx; /* 适当增大圆角 */
  opacity: 0;
  z-index: 1; /* 白色方块层级低于图标 */
  transition: opacity 0.3s ease;
}

.selected-overlay.show {
  opacity: 1;
}

/* 菜单遮罩层 */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 90;
}

/* 弹出菜单 */
.fab-menu {
  position: fixed;
  left: 0;
  right: 0;
  bottom: -100%;
  z-index: 100;
  transition: bottom 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fab-menu.show {
  bottom: 180rpx; /* 位于底部导航栏上方 */
}

.menu-content {
  width: 90%;
  background-color: transparent;
  border-radius: 30rpx;
  padding: 40rpx 20rpx;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tool-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
  padding: 20rpx;
}

.tool-item {
  width: 33.33%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60rpx;
}

.icon-wrapper {
  width: 120rpx;
  height: 120rpx;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(31, 38, 135, 0.1);
  border: 1rpx solid rgba(255, 255, 255, 0.5);
}

.tool-text {
  font-size: 28rpx;
  color: #FFFFFF;
  margin-top: 10rpx;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.close-button {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1rpx solid rgba(255, 255, 255, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30rpx;
  z-index: 101;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.close-icon {
  font-size: 60rpx;
  color: #333;
  line-height: 70rpx;
}
</style>